﻿@{
    ViewBag.Title = "Gallery";
}

<h1>Referenser</h1>
<hr />
<div class="row">
    <ul>
        <li><span class="glyphicon glyphicon-chevron-right"></span>Trelleborgsgalan</li>
        <li><span class="glyphicon glyphicon-chevron-right"></span>Countryfestivalen</li>
        <li><span class="glyphicon glyphicon-chevron-right"></span>Malmö music expo</li>
        <li><span class="glyphicon glyphicon-chevron-right"></span>Trelleborgs isbana</li>
    </ul>
</div>
<div class="row gallery-images">
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild11.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild12.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild13.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild14.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild15.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild2.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild3.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild4.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild5.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild6.jpg" alt="" class="img-responsive imageresource" /></a></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><a href="#" class="pop"><img src="../../Content/Images/bild7.jpg" alt="" class="img-responsive imageresource" /></a></div>
</div>

<div class="modal fade clearfix" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="" id="imagepreview">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Stäng</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(".pop").on('click', function () {
        $('#imagepreview').attr('src', $('.imageresource').attr('src'));
        $('#imagemodal').modal('show');
        $('#imagepreview').css('max-width', '100%');
    });
</script>